<template>
	<view class="page_content" :style="{backgroundImage: 'url(' + urlDomain+'crmebimage/presets/yqm_bg.png' + ')'}">
		<view class="code" :style="{backgroundImage: 'url(' + urlDomain+'crmebimage/presets/invitationcode_bg.png' + ')'}">
			<view class="canv">
				<canvas class="qr" canvas-id="qrcode"></canvas>
			</view>
		</view>
		<view class="codeStr">邀请码：<text @click="copyCode">{{codeStr}}</text></view>
		<view class="mark">
			邀请说明：老会员邀请新会员注册，老会员将得到新会员每笔消费订单的0.3%佣金
		</view>
		<!-- #ifdef APP-PLUS -->
		<view class="btnM">
			<image :src="urlDomain+'crmebimage/presets/save.png'" @click="saveImg"></image>
		</view>
		<!-- #endif -->
		<view class="canvas" v-show="canvasStatus">
			<canvas :style="{width: `${windowWidth}px`, height: `${windowHeight}px`}" canvas-id="canvasOne"></canvas>
			<!-- <canvas canvas-id="qrcode2" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" /> -->
		</view>
	</view>
</template>

<script>
	import {
		getMyInviteCodeApi
	} from '@/api/user.js';
	import UQrcode from '@/utils/uqrcode.js';
	export default {
		data() {
			return {
				urlDomain: this.$Cache.get("imgHost"),
				codeImg: '',
				codeStr: '',
				PromotionCode: '',
				canvasStatus: true, //海报绘图标签
				poster: '',
				qrcodeSize: 200,
				windowHeight: 1190,
				windowWidth: 750
			}
		},
		onLoad() {
			this.getUserCode();
		},
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP
		onShareAppMessage: function() {
			return {
				title: '日夜购小程序',
				imageUrl: this.spreadList[0].pic,
				path: `/pages/index/index?id=0&spread=${this.uid}` ,
			};
		},
		// #endif
		methods: {
			getUserCode() {			
				//获取二维码信息，生成二维码
				getMyInviteCodeApi({width: '200', height: '200'}).then(res =>{
					this.codeStr = res.data.userNumber;
					this.codeImg = res.data.code;
					
					UQrcode.make({
						canvasId: 'qrcode',   //切记canvasId 里边的内容需要跟canvas里边canvas-id="qrcode"的名字一样
						componentInstance: this,
						text: this.codeImg,  //需要转成二维码的内容是后端传过来的，我这里是onLoad传过来的，根                              据自己的需要
						size: 200,
						margin: 10,
						backgroundColor: '#ffffff',
						foregroundColor: '#000000',
						fileType: 'jpg',
						errorCorrectLevel: UQrcode.errorCorrectLevel.H,
						success: res => {
							this.PromotionCode = res;
						}
					});
				});
			},
			copyCode() {
				uni.setClipboardData({
				  data: this.codeStr,
				  success: function() {
					  this.$util.Tips({
					  	title: `邀请码已复制到剪切板`
					  });
				  }
				})
			},
			saveImg() {
				// 获取APP的所有页面列表
				const pages = getCurrentPages();
				// 获取到当前页面
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				let bitmap = new plus.nativeObj.Bitmap('amway_img');
				// 将webview内容绘制到Bitmap对象中
				currentWebview.draw(bitmap, function() {
					console.log('截屏绘制图片成功');
					let fileName = '_doc/' + new Date().getTime() + '.png'
					bitmap.save(fileName, {}, function(i) {
						console.log('bitmap保存图片成功：' + JSON.stringify(i));
						// 将图片保存到相册
						uni.saveImageToPhotosAlbum({
							filePath: i.target,
							success: function() {
								bitmap.clear(); //销毁Bitmap图片
								this.$util.Tips({
									title: "图片已保存至相册"
								});
							}
						});
					}, function(e) {
						this.$util.Tips({
							title: "图片保存失败"
						});
					});
				}, function(e) {
					this.$util.Tips({
						title: "图片绘制失败"
					});
				});
				//currentWebview.append(amway_bit);
			},
		}
	}
</script>

<style scoped lang="scss">
	.page_content{
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 100vh;
		color: #fff;
		text-align: center;
		
		.codeStr{
			font-size: 30rpx;
			margin-top: 32rpx;
		}
		
		.mark{
			font-size: 24rpx;
			width: 60vw;
			margin: 40rpx auto;
		}
	}
	
	.code{
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 70vh;	
	}
	
	.canv{
		background: linear-gradient(45deg, #FFF4DA, #FFF4DA, #E2DCFF);
		padding: 20px;
		position: relative;
		top: 36vh;
		width: 240px;
		margin: 0 auto;
		border-radius: 20px;
		
		.qr{
			border-radius: 20rpx;
			width: 200px; 
			height: 200px;
			margin: 0 auto;
		}
		
		
	}
	
	.btnM{
		display: flex;
		justify-content: center;
		
		image{
			width: 88rpx;
			height:88rpx;
			margin: 0 70rpx;
		}
	}
	
	.canvas {
		position: fixed;
		top: 60px;
		left: 0;
		z-index: -1;
	}
</style>